<template>
    <span class="status">
        <div v-if="matchStatus" :style="{ color: matchStatus.color }">
            <span v-if="matchStatus.hasIcon">{{ circular }}</span>
            {{ text }}
        </div>
        <div v-else>{{ text }}</div>
    </span>
</template>

<script>
    import { computed, defineComponent, ref } from 'vue'

    export default defineComponent({
        name: 'StatusIcon',
        props: {
            displayInfo: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            text: {
                type: String,
                default: () => {
                    return ''
                }
            }
        },
        setup(props) {
            const circular = ref('●')
            const statusList = computed(() => {
                return props.displayInfo.statusList || []
            })
            const matchStatus = computed(() => {
                let res = null
                for (let i = 0; i < statusList.value.length; i++) {
                    const { prefix, name } = statusList.value[i]
                    if (matchValue(prefix, name)) {
                        res = statusList.value[i]
                    }
                }
                return res
            })
            const matchValue = (type, value) => {
                switch (type) {
                    case 'belong':
                        return value.includes(props.text)
                    case 'notBelong':
                        return !value.includes(props.text)
                    case 'contain':
                        return props.text.includes(value)
                    case 'notContain':
                        return !props.text.includes(value)
                    case 'empty':
                        return !props.text.length
                    case 'notEmpty':
                        return props.text.length !== 0
                    case 'startWith':
                        return props.text.startsWith(value)
                    case 'notStartWith':
                        return !props.text.startsWith(value)
                    case 'endWith':
                        return props.text.endsWith(value)
                    case 'notEndWith':
                        return !props.text.endsWith(value)
                    default:
                        return true
                }
            }
            return {
                matchStatus,
                circular
            }
        }
    })
</script>
